<template>
<h1>鲜花商品列表</h1>
<div class="flower-grid">
<FlowerCard
v-for="product in products"
:key=product.id
:product="product"
/>
</div>
</template>

    <script>
    import axios from 'axios'
    import{ref,} from 'vue'
    import FlowerCard from './FlowerCard.vue'
        export default{
            name:'FlowerList',
            

            components:{
                FlowerCard
            },

            setup(){
                const products = ref([])

                const fetchFlowers = async() => {
                    const response = await axios.get('http://192.168.0.69:8000/flower/products')
                    products.value = response.data.map(product => ({
                        ...product,
imageUrl:`http://192.168.0.69:8000/flower/image/${product.item_code}.jpg`
                    }))
                    console.log(products)       
                }
                onMounted:{
                    fetchFlowers()
                }
                return{
                    products,
                }
            
        }
        }
        

        
    </script>

    <style>
    .flower-grid{
        display:grid;
        grid-template-columns:repeat(4,1fr);
        gap:10px;
    }
       </style>
